<template>
  <div class="content bg-white">
    <dc-header :title="'修改姓名'" :page-to="'/account'"
               :action-title="'保存'"
               @submit="submitform"></dc-header>

    <div class="head-top mt20">
      <div class="pl50 pr50 pt68">
        <inputItem placeholder="请输入姓名" type="text"
                   v-model="fullname"
                   :maxLength = "15"
                   v-validate="{ rules: { required: true } }"
                   name="姓名"
        />
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/components/header';
  import cell from '@/components/cell';
  import inputItem from '@/components/input/inputItem';
  import api from '@/common/api/personal';
  import mintUi from '@/common/mintUi';
  import {mapGetters} from 'vuex';
  import nativeAction from '@/common/native';

  /**
   * @namespace  components/personal/
   * @author ashen
   */
  export default {
    components: {
      'dc-header': header,
      'dc-cell': cell,
      'inputItem': inputItem
    },
    data () {
      return {
        fullname: ''
      };
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods: {
      submitform () {
        this.$validator.validateAll().then((result) => {
          if (result) {
            api.editUserName({
              fullname: this.fullname
            }).then(res => {
              mintUi.openToast('用户名修改成功!');
              this.userInfo.fullname = this.fullname;
              let userInfo = JSON.parse(JSON.stringify(this.userInfo));
              nativeAction.setInfo(userInfo);
              this.$router.push('/account');
            });
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
</style>
